<template>
  <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :label="false">expand</el-radio-button>
    <el-radio-button :label="true">collapse</el-radio-button>
  </el-radio-group> -->
  <el-menu
    class="custom-menu"
    :collapse="isCollapse"
    background-color="#fff"
    active-text-color="#000"
    text-color="#000"
    :collapse-transition="false" 
    @open="handleOpen"
    @select="handleSelect"
    @close="handleClose"
    :router="true"
    :default-openeds="openeds" 
  >
    <section v-for="(item,index) in list"     >
      <el-sub-menu v-if="item.children.length>0" :index="index.toString()">
      <template #title>
        <el-icon ><component :is="item.icon"/></el-icon>
        <span>{{item.label}}</span>
      </template>
      <el-menu-item  class="m-menu" v-for="(it,idx) in item.children" :index="it.path">{{ it.label }}</el-menu-item>
    </el-sub-menu>
    <el-menu-item v-if="item.children.length==0" :index="item.path.toString()"> 
      <template #title>
        <el-icon ><component :is="item.icon"/></el-icon>
        <span>{{item.label}}</span>
      </template>
    </el-menu-item>
    </section>
  </el-menu>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,Notebook,
  Avatar,
  User,ChatDotRound,Monitor,Delete,
  Guide,
  Wallet,OfficeBuilding,Headset,
  Medal,Histogram,CollectionTag,
  Sunrise,Postcard,HelpFilled
} from "@element-plus/icons-vue";

export default {
  name: "Header",
  data() {
    return {
      isCollapse: false,
      list:[],
      openeds:[]
    };
  },
  components: {
    Location,CollectionTag,Notebook,
    Document,ChatDotRound,Headset,
    IconMenu,Histogram,Monitor,Delete,
    Setting,
    Avatar,
    User,
    Guide,
    Wallet,
    Medal,OfficeBuilding,
    Sunrise,Postcard,HelpFilled
  },
  mounted() {
    this.getTreeData();
  },
  methods: {
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    handleSelect(index, indexPath) {},
    openOrClose() {
      if (this.isCollapse) {
        this.isCollapse = false;
      } else {
        this.isCollapse = true;
      }
    },
      getTreeData() {
      httpService("/javaApi/baseMenu/queryMyTree", {"systemCode":"2010"}, "get").then((data) => {
        this.list = data[0].children;
      });
    },
  },
};
</script>

<style scoped>
.custom-menu{
  width: 180px;
  min-height: calc(100vh - 70px);
}
.custom-menu ul{
  /* padding-left: 100px; */
}
</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: calc(100vh - 60px);
  padding: 10px;
  /* back dground: coral; */
}
.el-menu--collapse {
  min-height: calc(100vh - 60px);
}
.el-aside {
  transition: width 0.05s;
  -webkit-transition: width 0.05s;
  -moz-transition: width 0.05s;
  -webkit-transition: width 0.05s;
  -o-transition: width 0.05s;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  height: 100%;
}

.el-menu-item.is-active {
  color: #409EFF;
  background: white;
}
.m-menu.is-active {
  color: #409EFF;
  background: white;
  padding-left: 40px !important;
}

.m-menu:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1px solid #444;
  position: absolute;
  left: 25px;
  top: 23px;
}

.m-menu.is-active:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: #409EFF;
  position: absolute;
  left: 25px;
  top: 23px;
}

</style>